<!--
 * @Descripttion:
 * @Author: xiayujia
 * @Date: 2021-04-06 13:23:43
 * @LastEditors: xiayujia
 * @LastEditTime: 2021-07-02 23:55:14
 
 * @LastEditors: zhengminjie
 * @LastEditTime: 2021-07-04 15:06:14
-->
<template>
  <div class="app-container">
    <el-form :model="sendForm" ref="sendForm" v-show="showSearch" :inline="true">
      <el-form-item label="表格/文件" prop="dataSearch" style="margin-bottom:0px" @load="getList">
        <el-input
          v-model="sendForm.dataSearch"
          placeholder="请输入要查找的表格/文件关键字"
          clearable
          size="small"
          style="width:300px"
          @keyup.enter.native="Search"
        />
      </el-form-item>
      <el-form-item label="选择时间" style="margin-bottom:0px">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd hh:mm:ss"
          size="small"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-bottom:0px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button 
              type="primary" 
              plain
              size="mini"
              icon="el-icon-search"
             @click="Search"
            >查找</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button 
              type="danger" 
              plain
              size="mini"
              icon="el-icon-delete"
              @click="resetSearch('sendForm')"
            >清除</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <right-toolbar style="margin-bottom:8px"  :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    
  <!--表格具体信息-->
   <el-dialog title="表格具体信息" :visible.sync="excelOpen" append-to-body>
      <el-table style="width: 100%" border :data="tableData">
        <template v-for="(item,index) in tableHead">
          <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
        </template>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadExcel">下载</el-button>
        <el-button @click="excelOpen = false">取消</el-button>
      </span>
   </el-dialog>

    <!-- 文件公开 -->
    <el-dialog :title="wordName" :visible.sync="wordSelect" append-to-body>
      <el-tabs :tab-position="tabPosition='left'" style="height: 70%;overflow-y:auto;overflow-x:hidden;">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
        <div class="item"> 
          <dl v-html="item.content">
            {{item.content}}
          </dl>
        </div>
          <!--{{item.content}}-->
        </el-tab-pane>`
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadWord">下载</el-button>
        <el-button @click="wordSelect = false">取消</el-button>
      </span>
   </el-dialog>

    <!--文件具体信息-->
   <el-dialog title="文件具体信息" :visible.sync="wordOpen" append-to-body>
      <div class="item"> 
        <dl v-html="wordString">
          {{wordString}}
        </dl>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadWord">下载</el-button>
        <el-button @click="wordOpen = false">取消</el-button>
      </span>
   </el-dialog>

  <!-- 表格 -->

    <el-table v-loading="loading" :data="dataMessageList" @selection-change="handleSelectionChange" @cell-dblclick="detaildbclick" ref="tb">
      <el-table-column	type="selection"  width="55" align="center" />
      <el-table-column prop="projectname" label="项目名称" align="center" :show-overflow-tooltip="true"/>
     <!-- <el-table-column prop="distrigroup" label="发布群组" align="center" :show-overflow-tooltip="true"/>-->
      <el-table-column prop="receiver" label="收件人" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="dataMessage" label="数据信息" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dataType" label="文件类型" align="center" :show-overflow-tooltip="true"/>
      <el-table-column	prop="dataDate" label="时间"  align="center" :show-overflow-tooltip="true" sortable style:default-sort ="{prop:'dataDate',order:'descending'}" ></el-table-column>
    </el-table>


    <!-- 分页 --> 
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="sendForm.pageNum"
      :limit.sync="sendForm.pageSize"
    />

  </div>   
</template>

<script>
import {getDataList, searchDataList, table, word, getWordList} from '@/api/distribution/sendMessage'


export default {
  name: "sendForm",
  data(){
    return{
      //表格具体信息弹窗打开
      excelOpen: false,
      // word具体弹窗信息
      wordOpen:false,
      wordSelect:false,
      wordString:'',
      editableTabs:[],
      wordName:'',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 表格数据
      dataMessageList:[],
      // 表格显示数据
      tableHead:[],
      tableData:[],
      // 总条数
      total: 0,
      //具体
      dataDetail:[],
      //查询参数
      sendForm:{
          dataSearch:undefined,
          pageNum:1,
          pageSize:10,
          officeName:undefined,
      },
      //时间选择器
        pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateRange:"",
    }
  },
  created(){
    this.getList();
  },
  methods:{
    /** 刷新列表 */
    getList(){
        this.loading = true;
      getDataList().then(response => {
          console.log(response);
          this.dataMessageList = response.rows;
          let i=0;
          response.rows.forEach(item => {
            this.dataMessageList[i].projectname=item.projectName;
            this.dataMessageList[i].receiver=item.userName;
            this.dataMessageList[i].dataMessage=item.officeName;
            this.dataMessageList[i].dataDate=item.createTime;
            this.dataMessageList[i].officeId=item.officeId;
            this.dataMessageList[i].ifPublic=item.ifPublic;
            this.dataMessageList[i].dataContent=item.dataContent;
            this.dataMessageList[i].id=item.id;
            if( item.type=='0')
            {
              this.dataMessageList[i].dataType="表格";
            }
            else
              this.dataMessageList[i].dataType="文件";
            i++;
          });
          this.loading = false;
        }
      );
      this.sendForm.pageNum=1;
    },
    /** 搜索按钮操作 */
     Search(){
      //  this.dataMessage.pageNum=1;
       let officeName="";
       let startDate="";
       let endDate="";
       officeName=this.sendForm.dataSearch;
       console.log(officeName);
      //  let date=this.dateRange[0];
      if(this.dateRange!=null)
      {
        startDate=this.dateRange[0];
        endDate=this.dateRange[1];
      }
       console.log(startDate);
       console.log(endDate);
       console.log(typeof endDate);
      //  console.log(this.dateRange);
       searchDataList(officeName,startDate,endDate).then(res=>{
         console.log(res);
         this.dataMessageList=[];
         this.dataMessageList = res.rows;
         let i=0;
          res.rows.forEach(item=>{
            this.dataMessageList[i].projectname=item.projectName;
            this.dataMessageList[i].receiver=item.userName;
            this.dataMessageList[i].dataMessage=item.officeName;
            this.dataMessageList[i].dataDate=item.createTime;
            this.dataMessageList[i].officeId=item.officeId;
            this.dataMessageList[i].ifPublic=item.ifPublic;
            this.dataMessageList[i].dataContent=item.dataContent;
            this.dataMessageList[i].id=item.id;
            if( item.type=='0')
            {
              this.dataMessageList[i].dataType="表格";
            }
            else
              this.dataMessageList[i].dataType="文件";
            i++;
          })
       })
     },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    resetSearch(formName){
      this.$refs[formName].resetFields();
      this.dateRange="";
    },
    // 表格详情
    detaildbclick(row,column,cell,event){
      //单元格信息
      console.log(cell,'cell');
      this.tableHead = [];
      this.tableData = [];
      if(column.property=="dataMessage" && row.dataType == "表格")
      { 
        if(row.ifPublic == 0){
          let content = row.dataContent.split(",");
          let Data = {};
          content.forEach(item=>{
            let val = item.split(":");
            let head = {
              column_name: val[0],
              column_comment: val[0]
            };
            this.tableHead.push(head);
            Data[val[0]]=val[1];
          })
          this.tableData.push(Data);
          this.excelOpen = true;
        }else{
          table(row.officeId).then(res=>{
            console.log(res);
            // 获取表头数据
            res.header.forEach(item=>{
              let head = {
                column_name: item,
                column_comment: item
              };
              this.tableHead.push(head);
            })
            // 获取表格内容
            res.data.forEach(item=>{
              let val = item.split(",");
              let Data = {};
              for(let i = 0;i < val.length; i++){
                Data[res.header[i]] = val[i];
              }
              this.tableData.push(Data);
            })
            this.excelOpen=true;
          })
        }
      }
      else if(column.property=="dataMessage" && row.dataType == "文件"){
        if(row.ifPublic == 0){
          word(row.id).then(res=>{
            if(res == "无"){
              this.$message.error('该文件夹中没有属于你的文件');
            }else{
              this.wordString = res;
              console.log(this.wordString);
              this.wordOpen = true;
            }
          })
        }else{
          getWordList(row.id).then(res=>{
            this.wordName = row.dataMessage;
            this.editableTabs = res;
            console.log(this.editableTabs);
            this.wordSelect = true;
          })
        }
      }
    },
    // 下载表格
    uploadExcel(){

    },
    // 下载文档
    uploadWord(){

    },
  }
}

</script>